/****************
 *@description:  售后订单详情  @/orderManage/afterSaleOrder/detail
 *@author: Xhd
 *@API:  
 *@date: 2023-11-14 09:16:38
 *@version: V1.0.0
*************************************************************************/

import React, { useState, useEffect, useRef } from "react";
import { Descriptions, Table, Tag, Space, Tooltip } from "antd";
import { QuestionCircleFilled } from "@ant-design/icons";
import GoBack from "@/components/TheGoBack";
import { useLocation } from 'react-router-dom';
import TheImage from "@/components/TheImage";
import { apiShopSalesReturnOrderDetail } from "@/api/orderManage/index.js";
import ChargebackSteps from '../components/ChargebackSteps'
import "../../style/style.less";
import { Decimal } from 'decimal.js';
import _ from "lodash";

const AfertSaleOrderDetails = () => {
  const location = useLocation();
  const [orderData, setOrderData] = useState({})
  const [columns, setColumns] = useState([
    {
      title: '商品信息',
      dataIndex: 'goodsInfo',
      key: 'goodsInfo',
      render: (text, record) => {
        return (
          <div style={{ display: 'flex', alignItems: 'center', position: 'relative', }}>
            <TheImage src={[record.goodsImage]} width={100} />
            <span style={{ margin: '0 10px' }}>{record.goodsName}</span>
            <span>{record.sku}</span>
            {
              record.giftId !== '0' &&
              <div className='gift'>赠</div>
            }
          </div>
        )
      }
    },
    {
      title: '商品单价',
      dataIndex: 'orderPrice',
      key: 'orderPrice',
      render: (text, render) => {
        return <>
          {Decimal(text).div(Decimal(100)).toNumber().toFixed(2)}
          {
            render.activityType === 'SECKILL_HOMEPAGE' && <div style={{ color: 'red' }}>秒杀价</div>
          }
          {
            render.activityType === 'TEAM_BUY' && <Tag color="red">拼团价</Tag>
          }
        </>
      },
    },
    {
      title: '商品数量',
      dataIndex: 'orderProductCount',
      key: 'orderProductCount',
    },
    {
      title: '备注',
      dataIndex: 'skuDescription',
      key: 'skuDescription',
    },
    {
      title: '总计',
      dataIndex: 'orderPriceTotal',
      key: 'orderPriceTotal',
      render: (text, record) => {
        return Decimal(text).div(Decimal(100)).toNumber().toFixed(2)
      }
    },
  ])
  const [dataSource, setDataSource] = useState([])
  const [stepsItem, setStepsItem] = useState([
    { title: "买家发起退款申请", description: "" },
    { title: "商家同意退款", description: "" },
    { title: "买家寄回商品", description: "" },
    { title: "商家确认收货", description: "" },
    { title: "完成", description: "" }
  ])

  useEffect(() => {
    getData()
  }, [])

  let getData = async () => {
    let shopSalesReturnId = location.state.id
    await apiShopSalesReturnOrderDetail({ shopSalesReturnId }).then(res => {
      setOrderData(res.data)
      const productSkuJson = res.data.orderDetailVo
      const { goodsSkuJson } = productSkuJson
      let obj = JSON.parse(goodsSkuJson)
      let arr = obj.skuAttribute.map((v) => {
        return v.value
      })
      let dataSource = [
        {
          key:productSkuJson.materialId,
          materialId: productSkuJson.materialId,
          materialName: productSkuJson.materialName,
          goodsName: productSkuJson.goodsName,
          orderPrice: productSkuJson.orderPrice,
          orderProductCount: productSkuJson.orderProductCount,
          orderPriceTotal: productSkuJson.orderPriceTotal,
          sku: arr,
          goodsImage: productSkuJson.goodsImage,
          productSkuJson,
          giftId: productSkuJson.giftId,
          activityType: productSkuJson.activityType,
          skuDescription: productSkuJson.skuDescription
        },
      ]
      setDataSource(dataSource)
    })
  }
  let getOrderState = (value) => {
    let label = null
    switch (value) {
      case '1':
        label = <span style={{ color: '#d9001b' }}>退款中</span>
        break
      case '2':
        label = <span style={{ color: '#d9001b' }}>退款中</span>
        break
      case '3':
        label = <span style={{ color: '#d9001b' }}>退款中</span>
        break
      case '4':
        label = <span style={{ color: '#c280ff' }}>退款失败</span>
        break
      case '5':
        label = <span style={{ color: '#c280ff' }}>退款失败</span>
        break
      case '6':
        label = <span style={{ color: '#c280ff' }}>退款失败</span>
        break
      case '7':
        label = <span style={{ color: '#B8741A' }}>退款取消</span>
        break
      case '0':
        label = <span style={{ color: '#B8741A' }}>退款关闭</span>
        break
      case '9':
        label = <span style={{ color: '#70b685' }}>退款成功</span>
        break
    }
    return label
  }

  return (
    <div className="p-layout-box">
      <GoBack title={"售后单详情"} />
      <div style={{ lineHeight: "30px" }}>
        订单编号：{orderData.orderCode || ""}
      </div>
      <div className="border-box margin">
        {
          Object.values(orderData).length === 0 ? null :
            <ChargebackSteps
              dataSource={orderData}
              salesStatus={orderData.salesStatus}
              moneyStatus={orderData.moneyStatus}
              salesId={orderData.shopSalesReturnId}
              countdown={orderData.countdown}
              autoAgreeRefund={orderData.autoAgreeRefund}
              autoAgreeRefundSetting={orderData.autoAgreeRefundSetting}>
            </ChargebackSteps>
        }
      </div>
      <div className="bottom">
        <div className="order-details-title">
          订单概况
        </div>
        <Descriptions title="" column={4} >
          <Descriptions.Item label="售后金额" >
            {orderData.orderDetailVo ? "￥" + Decimal(orderData.orderDetailVo.detailPayPrice).div(Decimal(100)).toNumber().toFixed(2) : ""}
            {orderData.freightReturnStatus === 1 ? <Tooltip title={
              <Space direction={"vertical"}>
                <div>包含运费：{orderData.freightReturnPrice ? Decimal(orderData.freightReturnPrice).div(Decimal(100)).toNumber().toFixed(2) : 0}元</div>
              </Space>
            }>
              <QuestionCircleFilled style={{ fontSize: 14 }} />
            </Tooltip> : null}
          </Descriptions.Item>
          <Descriptions.Item label="售后方式" >{orderData.moneyStatus === 'N' ? '仅退款' : '退货退款'}</Descriptions.Item>
          <Descriptions.Item label="售后原因" >{orderData.remark}</Descriptions.Item>
          <Descriptions.Item label="售后数量" >{orderData.returnOrderCount}</Descriptions.Item>
          <Descriptions.Item label="售后编号" >{orderData.returnCode}</Descriptions.Item>
          <Descriptions.Item label="售后发起时间" >{orderData.createTime}</Descriptions.Item>
          <Descriptions.Item label="售后备注" >{orderData.otherInfo}</Descriptions.Item>
          <Descriptions.Item label="售后状态" >{getOrderState(orderData.salesStatus)}</Descriptions.Item>
          <Descriptions.Item label="售后照片" >
            <Space>
              {_.toString(orderData.returnDocuments)
                ? <TheImage src={_.toString(orderData.returnDocuments).split(',')} width={100} />
                : ''}
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="寄回凭证" >
            <Space>
              {_.toString(orderData.returnVoucher)
                ? <TheImage src={_.toString(orderData.returnVoucher).split(',')} width={100} />
                : ''}
            </Space>
          </Descriptions.Item>
        </Descriptions>
      </div>
      <div className="bottom">
        <div className="order-details-title">
          商品信息
        </div>
        <Table bordered columns={columns} dataSource={dataSource} pagination={false}
          summary={(pageData) => {
            let totalOrderPriceTotal = 0
            let totalOrderProductCount = 0
            pageData.forEach(({ orderPriceTotal, orderProductCount }) => {
              totalOrderPriceTotal += orderPriceTotal || 0
              totalOrderProductCount += orderProductCount || 0
            })
            return (
              <>
                <Table.Summary.Row>
                  <Table.Summary.Cell colSpan={7}>
                    <div style={{ textAlign: 'center' }}>
                      {`共${totalOrderProductCount}件商品，总计`}
                      {Decimal(totalOrderPriceTotal).div(Decimal(100)).toNumber().toFixed(2)}元
                    </div>
                  </Table.Summary.Cell>
                </Table.Summary.Row>
              </>
            )
          }}
        />
      </div>
    </div>
  )
}

export default AfertSaleOrderDetails
